<template>
  <div>
    <el-card style="">
      <div style="display: flex;justify-content: space-between;">
          <div style="font-size: 24px;font-weight: bold;">导航管理</div>
          <div><el-button type="primary" @click="dialog_add = true">+ 添加导航</el-button></div>
      </div>
      <div style="margin-top: 30px;">
        <el-table :data="dataList" style="width: 100%" row-key="navigationId">
          <!-- <el-table-column type="expand" width="60">
            <template #default="props">
              <div m="4">
                <el-table :data="props.row.children" :show-header="false" v-show="props.row.children.length>0">
                  <el-table-column label="" prop="" width="60" />
                  <el-table-column label="导航名称" prop="navigationName" align="center" />
                  <el-table-column label="上级" prop="parentName" align="center" />
                  <el-table-column label="跳转链接" prop="url" align="center" />
                  <el-table-column label="默认图标" prop="defaultIcon" align="center" />
                  <el-table-column label="选中图标" prop="icon" align="center" />
                  <el-table-column prop="" label="操作" align="center">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="del(scope.row)">
                            <el-icon :size="16"><Delete /></el-icon>
                        </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </el-table-column> -->

          <!-- <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
    >
      <el-table-column prop="date" label="Date" sortable />
      <el-table-column prop="name" label="Name" sortable />
      <el-table-column prop="address" label="Address" sortable />
    </el-table> -->

          <el-table-column prop="navigationName" label="导航名称"  />
          <el-table-column prop="parentName" label="上级" />
          <el-table-column prop="url" label="跳转链接"  />
          <el-table-column prop="defaultIcon" label="默认图标" />
          <el-table-column prop="icon" label="选中图标"/>
          <el-table-column prop="" label="操作" >
            <template #default="scope">
                <el-button link type="primary" size="small" @click="del(scope.row)">
                    <el-icon :size="16"><Delete /></el-icon>
                </el-button>
                <el-button link type="primary" size="small" @click="edit(scope.row)">
                    <el-icon :size="16"><Edit /></el-icon>
                </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-dialog v-model="dialog_add" title="新增" width="800">
      <div>
        <div style="margin-left: 30px;display: flex;align-items: center;">
          <div style="margin-right: 10px;font-size: 14px;width: 80px;">
            导航名称
          </div>
          <el-input v-model="addForm.navigationName" style="width: 240px;border-radius: 0" placeholder=""></el-input>
        </div>
        <div style="margin-left: 30px;display: flex;align-items: center;margin-top: 20px">
          <div style="margin-right: 10px;font-size: 14px;width: 80px;">
            导航链接
          </div>
          <el-input v-model="addForm.url" style="width: 240px;border-radius: 0" placeholder=""></el-input>
        </div>
        <div style="margin-left: 30px;display: flex;align-items: center;margin-top: 20px">
          <div style="margin-right: 10px;font-size: 14px;width: 80px;">
            父级菜单
          </div>
          <el-select v-model="addForm.parentId" placeholder="Select" clearable style="width: 240px">
            <el-option
              v-for="item in dataList"
              :key="item.navigationId"
              :label="item.navigationName"
              :value="item.navigationId"
            />
          </el-select>
        </div>
        <div style="margin-left: 30px;display: flex;align-items: center;margin-top: 20px">
          <div style="margin-right: 10px;font-size: 14px;width: 80px;">
            图片
          </div>
          <div>
              <el-upload
                class="avatar-uploader"
                :action="baseURL_dev+'/common/upload'"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
              >
                <img v-if="addForm.defaultIcon" :src="baseURL_dev+addForm.defaultIcon" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialog_add = false">取消</el-button>
          <el-button type="primary" @click="addUser()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="dialog_edit" title="新增" width="800">
      <div>
        <div style="margin-left: 30px;display: flex;align-items: center;">
          <div style="margin-right: 10px;font-size: 14px;width: 80px;">
            导航名称
          </div>
          <el-input v-model="editForm.navigationName" style="width: 240px;border-radius: 0" placeholder=""></el-input>
        </div>
        <div style="margin-left: 30px;display: flex;align-items: center;margin-top: 20px">
          <div style="margin-right: 10px;font-size: 14px;width: 80px;">
            父级菜单
          </div>
          <el-select v-model="editForm.parentId" placeholder="Select" clearable style="width: 240px">
            <el-option
              v-for="item in dataList"
              :key="item.navigationId"
              :label="item.navigationName"
              :value="item.navigationId"
            />
          </el-select>
        </div>
        <div style="margin-left: 30px;display: flex;align-items: center;margin-top: 20px">
          <div style="margin-right: 10px;font-size: 14px;width: 80px;">
            图片
          </div>
          <div>
              <el-upload
                class="avatar-uploader"
                :action="baseURL_dev+'/common/upload'"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
              >
                <img v-if="editForm.defaultIcon" :src="baseURL_dev+addForm.defaultIcon" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialog_edit = false">取消</el-button>
          <el-button type="primary" @click="editUser()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
  
  <script setup lang="ts">
    import '@wangeditor/editor/dist/css/style.css' // 引入 css
    import { baseURL_dev } from '../config/baseUrl'
    import { onBeforeUnmount, shallowRef,onMounted,ref } from 'vue'
    import { ElMessage, ElMessageBox,ElNotification } from 'element-plus'
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
    import { Plus } from '@element-plus/icons-vue'
    import type { UploadProps } from 'element-plus'
    import { $NavigationList,$NavigationAdd,$NavigationEdit,$NavigationDel } from '../api/content'

    onMounted(()=>{
      loadList()
    })

    let dataList = ref([])
    let form = ref({})
    form.caseName = ''
    form.pageNum = 1,
    form.pageSize = 10

    let dialog_add = ref(false)
    let dialog_edit = ref(false)
    let addForm = ref({})
    let editForm = ref({})
    
    const loadList = async ()=>{
      console.log(form.value)
      let ret = await $NavigationList(form.value)
      console.log(ret)
      dataList.value = ret.rows
    }

    const addUser = async ()=>{
      let res = ref({})
      res = await $NavigationAdd(addForm.value)
      console.log('res',res)
      if(res.code==0){
        loadList()
        dialog_add.value = false
      }
    }

//     const tableData: User[] = [
//   {
//     id: 1,
//     date: '2016-05-02',
//     name: 'wangxiaohu',
//     address: 'No. 189, Grove St, Los Angeles',
//   },
//   {
//     id: 2,
//     date: '2016-05-04',
//     name: 'wangxiaohu',
//     address: 'No. 189, Grove St, Los Angeles',
//     children: [
//     {
//         id: 31,
//         date: '2016-05-01',
//         name: 'wangxiaohu',
//         address: 'No. 189, Grove St, Los Angeles',
//       },
//     ],
//   },
//   {
//     id: 3,
//     date: '2016-05-01',
//     name: 'wangxiaohu',
//     address: 'No. 189, Grove St, Los Angeles',
//     children: [
//       {
//         id: 31,
//         date: '2016-05-01',
//         name: 'wangxiaohu',
//         address: 'No. 189, Grove St, Los Angeles',
//       },
//       {
//         id: 32,
//         date: '2016-05-01',
//         name: 'wangxiaohu',
//         address: 'No. 189, Grove St, Los Angeles',
//       },
//     ],
//   },
//   {
//     id: 4,
//     date: '2016-05-03',
//     name: 'wangxiaohu',
//     address: 'No. 189, Grove St, Los Angeles',
//   },
// ]

    const del = async (row)=>{
      console.log(row)
      ElMessageBox.confirm(
        '您确定要删除这条数据吗？',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(async() => {
          let del = {}
          del.navigationIds = row.navigationId
          console.log('del',del)
          let res = ref({})
          res = await $NavigationDel(del)
          console.log('res',res)
          if(res.code==0){
            loadList()
          }
        })
        .catch(() => {
        })
    }

    const editUser = async ()=>{
      let res = ref({})
      res = await $NavigationEdit(editForm)
      console.log('res',res)
      if(res.code==0){
        loadList()
        dialog_edit.value = false
      }
    }

    const edit = async (row)=>{
      console.log(row)
      editForm = row
      dialog_edit.value = true
    }

    const handleAvatarSuccess: UploadProps['onSuccess'] = (
      response,
      uploadFile
    ) => {
      // console.log(baseURL_dev)
      console.log('response',response)
      console.log('uploadFile',uploadFile)
      addForm.value.productImageUrl = response.fileName
    }

    const handleAvatarSuccess2: UploadProps['onSuccess'] = (
      response,
      uploadFile
    ) => {
      editForm.value.productImageUrl = response.fileName
    }

  </script>
  
  <style scoped lang="less">
  .avatar-uploader .avatar {
  width: 120px;
  height: 120px;
  display: block;
}
  .avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
}
  </style>